I want to pass the isVisibile value to the component "Livechat.js" so that I can dynamically edit some info there according to the value of isVisibile.
File where the isVisibile logic is - NewsLetter.js
const NewsLetter = () => {
const newsLetterRef = useRef();
const [isVisible , setIsVisible] = useState()
useEffect( () => {
const observer = new IntersectionObserver( (entries) => {
const entry = entries[0];
setIsVisible(entry.isIntersecting)
})
observer.observe(newsLetterRef.current)
} , [])
return (
<>
<NewsLetterWrapper>
<div ref={newsLetterRef} className={styles.newsLetterCenter}>
<div className={styles.newsLetterContainer}>
<div>
<p className={styles.newsLetterTitle}>Subscribe To Our <br /> <span> Newsletter For 10% - 50% OFF </span> </p>
<p className={styles.newsLetterDesc}>Stay up to date with our latest offers and promotions by signing up now! <br /> Be the first to know of our 10% - 50% discounts.</p>
</div>
<div className={styles.newsLetterInputContent}>
<div>
<input className={styles.newsLetterInput} type="text" placeholder='Enter email' />
</div>
<PrimaryButton>
Submit
</PrimaryButton>
</div>
</div>
</div>
</NewsLetterWrapper>
</>
)
}
export default NewsLetter
Where I want to use the prop - Live.js
const Livechat = (props) => {
return (
<>
<div className={styles.whatsappFloat}>
<div className={styles.chatText}>
<p>Chat With Us Now</p>
</div>
<a href='https://api.whatsapp.com/send?phone=000000000' >
<img src={LivechatImg} alt= "/" />
</a>
</div>
</>
)
}
Where I use both components on one page - Homepage.js
const HomePage = () => {
return (
<>
<Livechat />
<NewsLetter />
</>
What I want to do is basically get the isVisibile Value from NewsLetter and pass it as a prop to Livechat component. Any idea how i am supposed to achieve this ? Any help would be appreciated , Thank you in advance.
I would recommend moving isVisible into HomePage which would allow you to pass it to both components. You can then update isVisible by passing a function onIsVisibleChange().
const HomePage = () => {
const [isVisible , setIsVisible] = useState()
return (
<>
<Livechat onIsVisibleChange={setIsVisible}/>
<NewsLetter isVisible={isVisible}/>
</>
}
You can update it in NewsLetter:
const NewsLetter = (props) => {
const {onIsVisibleChange} = props;
const newsLetterRef = useRef();
useEffect( () => {
const observer = new IntersectionObserver( (entries) => {
const entry = entries[0];
onIsVisibleChange(entry.isIntersecting);
})
observer.observe(newsLetterRef.current)
} , [])
...
}
Similarly, in Livechat you can use the variable like this:
const Livechat = (props) => {
const {isVisible} = props;
return (
<>
<div className={styles.whatsappFloat}>
{isVisible &&
<div className={styles.chatText}>
<p>Chat With Us Now</p>
</div>
}
<a href='https://api.whatsapp.com/send?phone=000000000' >
<img src={LivechatImg} alt= "/" />
</a>
</div>
</>
)
}